import React from 'react';
import { connect } from 'dva';
import styles from './Login.less';
import PropTypes from 'prop-types'
import { Button, Row, Form, Input, Icon, Checkbox, Layout  } from 'antd'
import config from '../../utils/config.js'
import QueueAnim from 'rc-queue-anim'

const { Header, Content, Footer, Sider } = Layout;
const FormItem = Form.Item

const Login = ({
  loading,
  onOk,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll
  }
}) => {
  function handleOk (e) {
    e.preventDefault()
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }else{
        onOk(values)
      }
    })
  }

  return (
    <div>
      <div className={styles.login} style={{height:'100vh'}}>

      </div>
      <div className={styles.form} style={{zIndex:10}}>
        <QueueAnim delay = {200} type = 'top'>
          <div className = {styles.logo} key='1' >
            <img src={require('../../assets/aa.png')} />
          </div>
        </QueueAnim>
        <form onSubmit={handleOk}>
          <QueueAnim delay={500} type='top'>
            <FormItem hasFeedback key='1'>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请填写用户名'
                  }
                ]
              })(
                <Input prefix={<Icon type="user" />} size='large' placeholder='用户名' />
              )}
            </FormItem>
            <FormItem hasFeedback key='2'>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请填写密码'
                  }
                ]
              })(
                <Input prefix={<Icon type = "lock" />} size='large' type='password' placeholder='密码' />
              )}
            </FormItem>
            <FormItem key='3'>
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(
                <Checkbox><font color='#333'>记住我</font></Checkbox>
              )}
                <a className={styles.login_form_forgot} href="/repwd"><font color='#333'>忘记密码</font></a>
              <Button type='primary' htmlType='submit' size='large' loading={loading}>
                登录
              </Button>
            </FormItem>
          </QueueAnim>
        </form>
      </div>
      <div style={{ position:'absolute',bottom:12, zIndex:100, textAlign: 'center', width:'100%'}}>
        <font color='#333'>蓝海股份 版权所有  2017 由 战略发展部 提供支持</font>
     </div>
    </div>

  );
}

//数据类型校验
Login.propTypes = {
  form: PropTypes.object,
  loginButtonLoading: PropTypes.bool,
  onOk: PropTypes.func
}

export default Form.create()(Login);
